//用水平进度条的方式显示数据一级主题数，二级主题数，推文数，
//blockColors是用于绘制进度条的颜色 layer1_keywords->color对应
var total_twitter = 0;
var total_layer1 = 8;
var total_layer2 = 0;
var databarData = {};
var totaldataberData = {}
for (let i in myData['layer1info']) {
  total_twitter += myData['layer1info'][i].length;
  databarData[myData['layer1info'][i][0][2]] = myData['layer1info'][i].length;
}
totaldataberData['total_twitter'] = total_twitter;
for (let i in myData['layer2id_keywords']) {
  total_layer2 += 1;
}
//一级标题
function box1_right (data, total_layer1) {
  let parentContainer = document.getElementsByClassName('bubble_right')[0];
  let h2Element = document.createElement('h2');
  h2Element.style.marginLeft = 0;
  h2Element.style.marginTop = '5%';
  h2Element.innerText = '总推文数目';
  h2Element.style.color='#f9fafc';
  parentContainer.appendChild(h2Element);
  let h2_Element = document.createElement('h2');
  h2_Element.style.marginLeft = 0;
  h2_Element.style.marginBottom = 0;
  h2_Element.innerText = total_twitter + '条';
  h2_Element.style.color = 'red';
  h2_Element.style.fontSize = '20px'; // 设置字体大小为 16px
  //h2_Element.style.fontWeight = 'normal'; // 设置字体不加粗
  parentContainer.appendChild(h2_Element);
  let h2__Element = document.createElement('h2');
  h2__Element.style.marginLeft = 0;
  h2__Element.style.marginBottom = 0;
  h2__Element.innerText = '一级主题推文数目';
  h2__Element.style.color='#f9fafc';
  parentContainer.appendChild(h2__Element);
  let keys = Object.keys(data); // 获取键的数组
  let values = Object.values(data); // 获取值的数组
  let barlenth = Math.max(...values); // 获取值数组中的最大值
  // 循环创建多个元素
  for (let i = 0; i < total_layer1; i++) {
    let divElement = document.createElement('div');
    let h2Element = document.createElement('h2');
    h2Element.id = 'h2' + i;
    h2Element.innerText = keys[i];
    h2Element.style.marginLeft = 0;
    h2Element.style.marginBottom = 0;
    h2Element.style.fontSize = '16px'; // 设置字体大小为 16px
    //h2Element.style.fontWeight = 'normal'; // 设置字体不加粗
    h2Element.style.color = blockColors[keys[i]]; // 设置字体大小为 16px
    divElement.id = 'progress-chart' + i;
    divElement.style.display = 'flex';
    divElement.style.height = '30px';
    divElement.style.marginTop = '0%';
    divElement.style.marginRight = '0px';
    parentContainer.appendChild(h2Element);
    parentContainer.appendChild(divElement);
    draw_bar(divElement.id, values[i], blockColors[keys[i]], barlenth);
  }
}
function draw_bar (id, count, color, barlen) {
  let chartInstance = echarts.init(document.getElementById(id));
  let option = {
    xAxis: {
      show: false,
      max: barlen,
    },
    yAxis: {
      show: false,
      data: [''],
    },
    series: [
      {
        type: 'bar',
        barWidth: '30%',
        itemStyle: {
          color: color,
        },
        label: {
          show: true,
          position: 'insideleft',
          fontSize: 15, // 设置字体大小为 14px
          fontWeight: 'bold', // 设置字体加粗
          formatter: function (params) {
            return count; // 返回参数值
          },
          color: 'white', // 设置标签颜色为白色
        },
        data: [count],
      },
    ],
    grid: {
      left: '0',
      right: '0',
      top: '0',
      bottom: '0',
    },
  };
  chartInstance.setOption(option);
}
box1_right(databarData, total_layer1) 